<template>
	<view class="container" :class="'theme-'+theme">
	<view class="addTitle">
		<view class="titleDetail">
			<view class="titleLeft" >
				<image src="../../static/newh5/fanhui.png"
				class="yticon"
				style="width: 13px;height: 20px;color:black"
				@click="returnIndex()"
				></image>
			</view>
			<view class="titleCenter" >
			<b class="titleText">售后单详情</b>
			</view>
			<view class="titleRight"  style="color: #269cd3;flex:1" > </view>
		</view>
		</view>
		<view class="content">
			<view v-if="aftersaleData.status=='1'&&timestamp>0" style="text-align: center;padding-top: 10rpx;">
				<view style="background-color: #fef1e0;border-radius: 8rpx;margin: 0 auto;padding: 8rpx 40rpx;width: fit-content;">
					<view>剩余确认时间</view>
					<u-count-down bgColor="#fef1e0" :timestamp="timestamp"></u-count-down>
				</view>
				<view style="color: #909090;margin: 10rpx 0;">供应商若逾期未确认，系统将自动退款给您</view>
			</view>
      <view class="content-box">
<!--        <text >-->
<!--        <view style="display: flex" v-if="dictMap.SALE_AFTER_STATUS!=null?dictMap.SALE_AFTER_STATUS[aftersaleData.status]!=null?dictMap.SALE_AFTER_STATUS[aftersaleData.status].name!=''?dictMap.SALE_AFTER_STATUS[aftersaleData.status].name=='已完成':false:false:false">-->
        <view class="content-top" >
          <icon type="success" style="margin-left: 20rpx;align-items: center;line-height: 50px;"
                v-if="aftersaleData.status==='5'"></icon>
          <icon type="waiting" style="margin-left: 20rpx;align-items: center;line-height: 50px;"
                v-if="aftersaleData.status==='1'||aftersaleData.status==='3'||aftersaleData.status==='4'||aftersaleData.status==='8'||aftersaleData.status==='10'"></icon>
          <icon type="cancel" style="margin-left: 20rpx;align-items: center;line-height: 50px;"
                v-if="aftersaleData.status==='7'||aftersaleData.status==='6'||aftersaleData.status==='11'"></icon>

          <text style="margin-left: 10px;line-height: 50px;align-items: center;font-size: 20px;font:bold">
<!--            已完成{{dictMap.SALE_AFTER_STATUS[aftersaleData.status].name}}-->
<!--            已完成{{statusData}}-->
            <text>{{dataDictMap.SALE_AFTER_STATUS[aftersaleData.status]}}</text>
<!--            <text v-if="statusData!=null">{{statusData[7]}}</text>-->
            <text v-if="aftersaleData.status==='7'||aftersaleData.status==='6'||aftersaleData.status==='11'">
            <text style="margin-left: 10upx; font-size: 14px;color: red" @click="openPopup(dataDictMap.SALE_AFTER_STATUS,'confirm')">查看原因</text>
            </text>
          </text>
        </view>
        <uni-popup ref="showconfirm" :type="type" :mask-click="false">
          <view class="uni-tip">
            <text class="uni-tip-title">{{reasonShow}}</text>
            <text style="align-items: center;margin: auto;font-size: 14px">{{aftersaleData.cancelReason}}</text>
            <view class="uni-tip-group-button">
              <text class="uni-tip-button" @click="close('confirm')">知道了</text>
<!--              <text class="uni-tip-button confirm" @click="confirmReceive()">确定</text>-->
            </view>
          </view>
        </uni-popup>
      </view>
			<view class="product-list">
				<view class="line">
					<text class="eticon eticon-gongyingshang themeTextColor" style="margin-left: 0;margin-right: 16rpx;font-size: 20px;"></text>
					<text style="flex: 1;font-size: 28rpx;">{{aftersaleData.supplierName}}</text>
				</view>
<!--        <view style="height:40px;display: flex;align-items: center;background-color: #FFFFFF; padding: 20rpx;  ">
          <image src="../../static/missing-face.png" style="width: 20px;height: 20px"/>
          <text style="line-height: 20px;font-size: 16px;height: 20px;mtext-align:center;margin-left: 10rpx">{{aftersaleData.supplierName}}</text>
        </view> -->
				<view class="item" @click="goProductDetail(aftersaleData.productId)">

					<view class="left">
						<image :src="aftersaleData.productThumbnail"></image>
					</view>
					<view class="right">
						<view class="name">
							<text>{{aftersaleData.productName}}</text>
						</view>
						<view  style="display: flex; justify-content: space-between">
							<text>单价：￥{{aftersaleData.price | twoBitMoney}} </text>
              <text class="price">售后数量：{{aftersaleData.num}}</text>
						</view>
						<view class="bottom" style="justify-content: space-around">
						</view>
					</view>
				</view>
        <view class="line">
          <text>{{aftersaleData.type=='3' ? '维修类型' : '售后类型'}}
            <text style="margin-left: 10px">{{dataDictMap.SALE_AFTER_TYPE[aftersaleData.type]}}</text>
          </text>
        </view>
        <view class="line" v-if="aftersaleData.type!='3'">
          <text>售后原因<text style="margin-left: 10px">
			<text v-if="aftersaleData.type=='4'">{{dataDictMap.SALEAFTER_RETURN_MONEY_REASON[aftersaleData.reason]}}</text>
            <text v-else>
              <text>{{dataDictMap.RETURN_REASON[aftersaleData.reason]}}</text>
            </text>
          </text>
          </text>
        </view>
        <view class="line">
          <text>{{aftersaleData.type=='3' ? '说明' : '售后说明'}}<text style="margin-left: 10px">
<!--            <text v-if="dictMap.RETURN_REASON.length>0">-->
            <text>{{aftersaleData.issueDesc}}</text>
<!--          </text>-->
          </text>
          </text>
        </view>
        <view class="line" v-show="canHide && aftersaleData.type!='3'" v-if="aftersaleData.revertWay == '1'">
          <text>是否需要检测报告<text style="margin-left: 10px">{{aftersaleData.isNeedDetectionReport==0?'不需要':'需要'}}</text></text>
        </view>
        <view class="line" v-show="canHide && aftersaleData.type!='3'" v-if="aftersaleData.revertWay == '1'">
          <text>是否有包装<text style="margin-left: 10px">{{aftersaleData.isHasPackage==='0'?'没有':'有'}}</text></text>
        </view>
        <view class="line" v-show="canHide && aftersaleData.type!='3'" v-if="aftersaleData.revertWay == '1'">
          <text>包装是否完整<text style="margin-left: 10px">{{aftersaleData.packageDesc==='0'?'无包装':(aftersaleData.packageDesc==='10'?'包装完整':'包装破损')}}</text></text>
        </view>
        <view class="showHide"  style="padding: 20rpx" @click="isShowGood()" v-show="!canHide&&aftersaleData!=null && aftersaleData.type!='3'" v-if="aftersaleData.revertWay == '1'" >
          <view class="radio">
<!--            <text>共有{{order.items.length}}件商品，</text>-->
            <text >展示完整信息</text>
            <u-icon name="arrow-down" style="color: #909090;"></u-icon>
          </view>
        </view>
        <view class="showHide" style="padding: 20rpx" @click="isShowGood()" v-show="canHide && aftersaleData.type!='3'">
          <view class="radio">
            <text >收起</text>
            <u-icon name="arrow-up" style="color: #909090;"></u-icon>
          </view>
        </view>

			</view>

      <view class="exp-list">
        <view class="list-flex" style="display: flex">
          <view class="title-list">售后单信息</view>
<!--          <text style="font-size: 12px;color: #999;line-height: 20px;margin-left: 5px">(该地址是供应商上门取旧商品的地址)</text>-->
        </view>
        <view class="line-list">
          <view class="list-flex">
            售后单编号
            <text style="margin-left: 10px">{{aftersaleData.sn}}</text>
            <copyButton :content="aftersaleData.sn"></copyButton>
          </view>
        </view>
        <view class="line-list">
          <text>申请时间<text style="margin-left: 10px">{{aftersaleData.createTime}}</text></text>
        </view>
        <view class="line-list">
          <view class="list-flex">
            订单编号
            <text style="margin-left: 10px">{{aftersaleData.orderSn}}</text>
            <copyButton :content="aftersaleData.orderSn"></copyButton>
          </view>
        </view>
        <view class="line-list" v-show="canAftersaleHide">
          <view class="list-flex">
            供应商售后编号
            <text style="margin-left: 10px">{{aftersaleData.supplierSn}}</text>
            <copyButton :content="aftersaleData.supplierSn"></copyButton>
          </view>
        </view>
        <view class="line-list" v-show="canAftersaleHide">
          <text>申请人<text style="margin-left: 10px">{{aftersaleData.username}}</text></text>
        </view>
        <view class="line-list" v-show="canAftersaleHide">
          <text>联系电话<text style="margin-left: 10px">{{aftersaleData.mobile}}</text></text>
        </view>
        <view class="line-list" v-show="canAftersaleHide">
          <text>申请部门<text style="margin-left: 10px">{{aftersaleData.deptName}}</text></text>
        </view>
        <view class="showHide" @click="isShowAftersale()" v-show="!canAftersaleHide&&aftersaleData!=null">
          <view class="radio">
            <!--            <text>共有{{order.items.length}}件商品，</text>-->
            <text >展示完整信息</text>
            <u-icon name="arrow-down" style="color: #909090;"></u-icon>
          </view>
        </view>
        <view class="showHide" @click="isShowAftersale()" v-show="canAftersaleHide">
          <view class="radio">
            <text >收起</text>
            <u-icon name="arrow-up" style="color: #909090;"></u-icon>
          </view>
        </view>

        <!--			<textarea v-model="exp" placeholder-class="ph" placeholder="请填写说明信息" class="content"></textarea>-->
      </view>

      <view class="exp-list" v-if="aftersaleData.type=='3'">
        <view class="list-flex" style="display: flex">
          <view class="title-list">维修方式</view>
          <!--          <text style="font-size: 12px;color: #999;line-height: 20px;margin-left: 5px">(该地址是供应商上门取旧商品的地址)</text>-->
        </view>
        <view class="line-list">
          <view class="list-flex">
            维修方式
            <text style="margin-left: 10px">{{aftersaleData.revertWay ==='1'?'供应商上门取件':'物流发货'}}</text>
          </view>
        </view>
        <view class="line-list" v-if="aftersaleData.receiveUsername">
          <text>联系人<text style="margin-left: 10px">{{aftersaleData.receiveUsername}}</text></text>
        </view>
        <view class="line-list" v-if="aftersaleData.receiveMobile">
          <text>联系电话<text style="margin-left: 10px">{{aftersaleData.receiveMobile}}</text></text>
        </view>
        <view class="line-list" v-if="aftersaleData.receiverArea">
          <text>采购人地址<text style="margin-left: 10px">{{aftersaleData.receiverArea}} {{aftersaleData.receiverAddress}}</text></text>
        </view>
      </view>

      <view class="exp-list" v-if="aftersaleData.supplierContacts">
        <view class="list-flex" style="display: flex">
          <view class="title-list">供应商信息</view>
          <!--          <text style="font-size: 12px;color: #999;line-height: 20px;margin-left: 5px">(该地址是供应商上门取旧商品的地址)</text>-->
        </view>
        <view class="line-list" v-if="aftersaleData.revertWay == '2' ">
          <text>联系人<text style="margin-left: 10px">{{aftersaleData.supplierContacts}}</text></text>
        </view>
        <view class="line-list" v-if="aftersaleData.revertWay == '2' ">
          <text>联系电话<text style="margin-left: 10px">{{aftersaleData.supplierPhone}}</text></text>
        </view>
        <view class="line-list" v-if="aftersaleData.revertWay == '2' ">
          <text>供应商地址<text style="margin-left: 10px">{{aftersaleData.supplierAreaName}} {{aftersaleData.supplierReceiverAddress}}</text></text>
        </view>
      </view>

      <view class="exp-list" v-if="aftersaleData.logisticsNumbers">
        <view class="list-flex" style="display: flex">
          <view class="title-list">采购人发货信息</view>
          <!--          <text style="font-size: 12px;color: #999;line-height: 20px;margin-left: 5px">(该地址是供应商上门取旧商品的地址)</text>-->
        </view>
        <view class="line-list" v-if="aftersaleData.revertWay == '2' ">
          <text>物流公司<text style="margin-left: 10px">{{dataDictMap.LOGISTICS_COMPANY[aftersaleData.logisticsCompany]}}</text></text>
        </view>
        <view class="line-list" v-if="aftersaleData.revertWay == '2' ">
          <text>物流单号<text style="margin-left: 10px">{{aftersaleData.logisticsNumbers}}</text></text>
        </view>
<!--        <view class="line-list" v-if="aftersaleData.revertWay == '2' ">
          <view style="display: flex">
            <text style="width: 50px;">物流详情</text>
            <text style="margin-left: 8px;min-width: 300px;">
&lt;!&ndash;              <u-steps class="MT10" :list="item.trackList" :current="item.trackList.length" :direction="'column'"></u-steps>&ndash;&gt;
            </text>
          </view>
        </view>-->
      </view>

      <view class="exp-list" v-if="logisticsList.length > 0">
        <view class="list-flex" style="display: flex">
          <view class="title-list">供应商发货信息</view>
          <!--          <text style="font-size: 12px;color: #999;line-height: 20px;margin-left: 5px">(该地址是供应商上门取旧商品的地址)</text>-->
        </view>
        <view v-for="(item,index) in logisticsList">
          <view class="line-list">
            <text>发货信息{{index+1}}</text>
          </view>
          <view class="line-list" v-if="item.deliveryType == '1'">
            <text>物流公司<text style="margin-left: 10px">{{item.expressCompanyName}}</text></text>
          </view>
          <view class="line-list" v-if="item.deliveryType == '1'">
            <text>物流单号<text style="margin-left: 10px">{{item.expressCode}}</text></text>
          </view>
          <view class="line-list" v-if="item.deliveryType == '1'">
            <view style="display: flex">
              <text style="width: 50px;">物流详情</text>
              <text style="margin-left: 8px;min-width: 300px;">
                <u-steps class="MT10" :list="item.trackList" :current="item.trackList.length" :direction="'column'"></u-steps>
              </text>
            </view>
          </view>
        </view>

      </view>

      <view class="exp-list" v-if="aftersaleData.type!='3'">
        <view class="list-flex" style="display: flex">
          <view class="title-list">旧商品退回</view>
          <!--          <text style="font-size: 12px;color: #999;line-height: 20px;margin-left: 5px">(该地址是供应商上门取旧商品的地址)</text>-->
        </view>
        <view class="line-list">
          <view class="list-flex">
            退货方式
            <text style="margin-left: 10px">{{aftersaleData.type==='1'?'退':'换'}}货</text>
          </view>
        </view>
        <view class="line-list" >
          <view class="list-flex">退货地址<view style="margin-left: 10px">
            <view class="cgr-infos">
              <text>{{aftersaleData.receiveUsername}}</text>
              <text class="tels">{{aftersaleData.receiveMobile}}</text>
              <view class="addresss">
                <text>{{aftersaleData.receiverArea+' '+aftersaleData.receiverAddress}}</text>
              </view>
            </view>
            <view  style="display: flex">
          </view>
          </view>
          </view>
        </view>
        <view class="line-list" v-if="aftersaleData.revertWay == '2' ">
          <text>物流公司<text style="margin-left: 10px">{{dataDictMap.LOGISTICS_COMPANY[aftersaleData.logisticsCompany]}}</text></text>
        </view>
        <view class="line-list" v-if="aftersaleData.revertWay == '2' ">
          <text>物流单号<text style="margin-left: 10px">{{aftersaleData.logisticsNumbers}}</text></text>
        </view>
      </view>
		</view>

    <view class="action-sections">
      <button class="action-btns recom themeTextColor themeBorderColor" v-if="aftersaleData.status==='1'" @click.stop="openPopup(aftersaleData,'cancel')">取消</button>
      <button class="action-btns recom themeTextColor themeBorderColor" v-if="(aftersaleData.status==='5'||aftersaleData.status ==='9'||aftersaleData.status==='10')&&aftersaleData.type=='2'" @click="showLogistic(aftersaleData)">查看新商品发货物流</button>
      <button class="action-btns recom themeTextColor themeBorderColor" v-if="aftersaleData.status ==='9'||aftersaleData.status==='10'" @click="clickConfirm(aftersaleData)">确认收货</button>
      <button class="action-btns recom themeTextColor themeBorderColor" v-if="aftersaleData.status==='3'" @click="logisticsPopupShow(aftersaleData)">发货</button>
    </view>

    <uni-popup ref="showcancel" :type="type" :mask-click="false">
      <view class="uni-tip">
        <text class="uni-tip-title">取消售后单</text>
        <view class="popup-content uni-tip-content">
          <view class="order-info">售后单id：{{aftersaleData.id}}</view>
          <textarea class="cancel-reason" placeholder-class="ph" placeholder="请输入取消原因" v-model="cancelReason" />
        </view>
        <view class="uni-tip-group-button">
          <text class="uni-tip-button" @click="close('cancel')">取消</text>
          <text class="uni-tip-button confirm themeBgColor themeBorderColor" @click="cancelOrder()">确定</text>
        </view>
      </view>
    </uni-popup>
	</view>
</template>

<script>
import {  goback } from "@/common/utils/navigateBack.js";
import copyButton from '../../components/copy.vue'
	import {
		getAftersaleData,
		getAftersaleState,
		getDict
	} from '@/api/order/order.js';
import { dictService } from '@/common/utils/api.js'
import {
  confirmReceipt,
  getLogistics
} from '../../api/aftersale/aftersale.js'
import {cancelAftersale} from "../../api/order/order";
import moment from 'moment'
	export default {
    components: {

      copyButton
    },
		data() {
			return {
        curOrder: {},
        snid: '',
        cancelReason:'',
			  type:'center',
				aftersaleData: {
					reason: 1
				},
        canHide:false,
        canAftersaleHide:false,
				stateList: [],
        shouhuoType:'',
		dataDictMap:{
			SALE_AFTER_TYPE:{},
			SALEAFTER_RETURN_MONEY_REASON:{},
			LOGISTICS_COMPANY:{},
			SALE_AFTER_STATUS:{},
			SALE_AFTER_TYPE:{},
			RETURN_REASON:{}
		},
				dictMap: {
					RETURN_REASON: [{
						name: ''
					}],
          SALE_AFTER_STATUS:[{
              name: ''
            }],
          SALE_AFTER_TYPE:[{
					  name:''
					}],
					SALEAFTER_RETURN_MONEY_REASON:[]
				},
				status: '',
        reasonDatas:{},
				returnList: [{
						id: '3',
						title: "待采购人发货"
					},
					{
						id: '4',
						title: "待供应商确认收货"
					}
				],
				exchangeList: [{
						id: '3',
						title: "待采购人发货"
					},
					{
						id: '4',
						title: "待供应商确认收货"
					},
					{
						id: '8',
						title: "待供应商发货"
					},
					{
						id: '9',
						title: "待收货"
					}
				],
        logisticsList: []
			}
		},
		onLoad(op) {
			console.log('传值',op)
			this.snid=op.sn
			this.getData(op.sn);
			dictService(this, ['DELIVERY_TYPE','RETURN_REASON','SALE_AFTER_TYPE','SALE_AFTER_STATUS','LOGISTICS_COMPANY','SALEAFTER_RETURN_MONEY_REASON'])
		},
      computed: {
        reasonShow() {
          return this.dataDictMap.SALE_AFTER_STATUS[this.aftersaleData.status] +'原因'
        },
		timestamp(){
			if(this.aftersaleData.status=='1'&&this.aftersaleData.createTime){
				const countdown = moment(this.aftersaleData.createTime).add(1,'days')
				const result = countdown.diff(moment(),'seconds',false)
				return result>0?result:0
			}else return 0
		}
      },
		methods: {
		returnIndex() {
				goback()
			},
      // 开启弹窗
      openPopup(item, type) {
        this.curOrder = item;
        this.service('center', type)
      },
      service(type, open) {
        this.type = type;
        this.$nextTick(() => {
          this.$refs['show' + open].open();
        })
      },
      // 关闭弹窗
      close(type) {
        this.$refs['show' + type].close();
        this.curOrder={}
        this.cancelReason=''
      },
      // 取消售后单
      cancelOrder() {
        if(!this.cancelReason){
          this.$util.msg('请填写取消原因！')
          return;
        }
        console.log('curOrder',this.curOrder)
        const params = {
          sn: this.curOrder.sn,
          reason: this.cancelReason,
        }
        cancelAftersale(params).then(res => {
          if(res.code===0){
            this.$util.msg('取消成功')
            this.cancelReason = ''
            this.curOrder = {}
            this.page=1
            this.afterSaleList = []
            this.getData(this.snid)
            setTimeout( () => {
              this.close('cancel')
            }, 600)
          }else{
            this.$util.msg(res.message)
          }
        })
      },
      //控制商品盒子的显示隐藏
      isShowGood(){
        this.canHide = !this.canHide
      },
      //控制售后盒子的显示隐藏
      isShowAftersale(){
        this.canAftersaleHide = !this.canAftersaleHide
      },
			getData(sn) {
        console.log('初始化的方法')
				getAftersaleData({
					sn: sn
				}).then(res => {
          console.log('data----------------',res)
					if (res.code === 0) {
						this.aftersaleData = res.data
            this.getLog()
						// this.aftersaleData.reason = parseInt(this.aftersaleData.reason)
            console.log('data----------------',this.aftersaleData.type)
            console.log('data----------------',this.aftersaleData.reason)
						// this.aftersaleData.type = parseInt(this.aftersaleData.type)
					} else {
						this.$util.msg(res.message)
					}
				})
			},
			getStateData(sn) {
				getAftersaleState({
					sn: sn
				}).then(res => {
          console.log('售后单流转状态',res)
					if (res.code === 0) {
						this.stateList = res.data

						let wait = this.aftersaleData.revertWay === '1' ? "待供应商上门服务" : "待供应商确认收货";
						this.returnList[1].title = wait;
						this.exchangeList[1].title = wait;
						let cancelList = this.stateList.filter(sale => {
							//取消的标识
							return sale.type == '6' || sale.type == '7' || sale.type == '11';
						})
						if (cancelList.length > 0) {
							let cancel = cancelList[0];
							if (cancel.type == '6') {
								this.status = "供应商取消"
							} else if (cancel.type == '7') {
								this.status = "采购取消"
							} else if (cancel.type == '11') {
								this.status = "提交失败"
								return;
							}
							return;
						}

						if (this.stateList.length === 1) {
							this.status = '待供应商确认'
						} else {
							let aType = this.aftersaleData.type
							if (this.stateList[this.stateList.length - 1].type === '5') {
								if (aType === '1')
									this.status = '退货完成'
								else
									this.status = '换货完成'
								return;
							}
							if (aType === '1') {
								// 退货
								this.status = this.returnList[this.stateList.length - 1].title
							} else {
								// 换货
								this.status = this.exchangeList[this.stateList.length - 1].title
							}
						}
					} else {
						this.$util.msg(res.message)
					}
				})
			},
      // 确认收货
      clickConfirm(item) {
        console.log('item',item)
        const param = {
          saleAfterId: item.id
        }
        getLogistics(param).then(res => {
          console.log('物流',res)
          uni.hideLoading()
          if (res.code === 0){
            this.logisticsList = res.data;
            if (this.logisticsList.length === 1 && item.status === '10'){
              // this.openPopup(item,'confirm')
              uni.showModal({
                title: '提示',
                content: '请确认是否已收到货？',
                confirmColor: '#fa436a',
                success: suc => {
                  if (suc.confirm) {
                    confirmReceipt({
                      saleAfterId: this.logisticsList[0].saleAfterId,
                      outgoingCode: this.logisticsList[0].outgoingCode
                    }).then(res => {
                      if (res.code === 0) {
                        this.$util.msg('确认收货成功!')
                        // this.showOrderDetail(this.id)
                        this.getData(this.snid)
                      } else {
                        this.$util.msg(res.message)
                      }
                    })
                  }
                }
              })
            }else {
              uni.navigateTo({
                url: `/pages/deliver/deliver?item=${item.id}`
              })
              // this.openPopup(item,'log')
            }
          }
        })

      },
      getLog(){
        let param = {
          saleAfterId: this.aftersaleData.id
        }
        getLogistics(param).then(res => {
          console.log('物流',res)
          uni.hideLoading()
          if (res.code === 0){
            this.logisticsList = res.data;
          }
        })
      },
      // 发货
      logisticsPopupShow(item){
        console.log('item-------------',item)
        let sn=item.sn
        uni.navigateTo({
          url:`/pages/deliver/deliverGood?sn=${sn}`
        })
      },
			goProductDetail(id) {
				uni.navigateTo({
					url: `/pages/product/product?id=${id}`
				})
			},
			toOrderDetail(id) {
				uni.navigateTo({
					url: `/pages/order/detail?id=${id}`
				})
			},
      //查看新商品发货物流
      showLogistic(item){
        let data=item.id;
        uni.navigateTo({
          url: `/pages/deliver/deliver?item=${data}`
        })
      }
		}
	}
</script>

<style lang="scss">
	page{
		background-color: $my-bg-color-grey;
		min-height: 100%;
	}
	.container {
		background-color: $my-bg-color-grey;
		min-height: 100%;

		.my-navbar {
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			width: 100%;
			height: 88rpx;
			padding: 0 30rpx;
			font-size: $my-font-size-lg;
			border-bottom: 1px solid $my-border-color;
			background-color: $my-bg-color;
			position: fixed;
			left: 0;
			top: calc(var(--window-top) + var(--status-bar-height));
			z-index: 10;
			background: $my-bg-color;

			image {
				position: absolute;
				left: 30rpx;
				width: 28rpx;
				height: 40rpx;
			}
		}

		.content {
			font-size: $my-font-size-sm;
      .content-box{
        display: flex;
        align-items: center;
        justify-content: center;
        height: 50px;
        background-color: #F4F6FF;
        .content-top{
          display: flex;
          align-items: center;
          justify-content: center;
        }

      }
			.line {
				display: flex;
				align-items: center;
				height: 60rpx;
				//border-bottom: 1px solid $my-border-color-grey;
				padding: 0 20rpx;
        color: $my-text-color-grey;
				background-color: $my-bg-color;

				&.remark {
					word-break: break-all;
					// height: auto;
					padding: 30rpx;
					display: flex;

					.left {
						display: flex;
						align-items: center;
						// width: 16%;
						// width: 66px;
					}

					.right {
						flex: 1;
					}
				}

				&>.detail {
					color: $my-text-color-active;
				}

				.status {
					margin: auto;
					margin-right: 0;
					color: $my-bg-color-red;
				}

				.link {
					margin: auto;
					margin-right: 0;
					color: $font-color-spec;
				}
			}

			.cgr-info {
				padding: 20rpx 30rpx;
				min-height: 150rpx;
				line-height: 55rpx;
				margin: 16rpx 0;
				//border-top: 1px solid $my-border-color-grey;
				//border-bottom: 1px solid $my-border-color-grey;
				background-color: $my-bg-color;

				.tel {
					margin-left: 30rpx;
				}

				.address {
					line-height: 18px;
					color: $my-text-color-grey;
				}
			}

      .cgr-infos {
				//padding: 20rpx 30rpx;
				//min-height: 150rpx;
				//line-height: 55rpx;
				//margin: 16rpx 0;
				//border-top: 1px solid $my-border-color-grey;
				//border-bottom: 1px solid $my-border-color-grey;
				background-color: $my-bg-color;

				.tels {
					margin-left: 30rpx;
				}

				.addresss {
					line-height: 18px;
					color: $my-text-color-grey;
				}
			}

			.product-list {
				//padding: 20rpx;
        margin: 20rpx;
				//border-top: 1px solid $my-border-color-grey;
				//border-bottom: 1px solid $my-border-color-grey;

				.item {
					height: 220rpx;
					display: flex;
					border-bottom: 1px solid $my-border-color-grey;
					background-color: $my-bg-color;
					padding: 20rpx 20rpx;

					&:last-child {
						border-bottom: none;
					}

					.left {
						width: 200rpx;
						height: 160rpx;
						margin-right: 20rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.right {
						width: 550rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.name {
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
							line-height: 40rpx;
							max-height: 80rpx;
							word-break: break-all;
						}

						.price {
							//color: $my-text-color-red;
              font-weight: bold;
							line-height: 32rpx;
						}

						.bottom {
							display: flex;
							justify-content: flex-start;
							align-items: center;

							.num {
								margin-right: 40rpx;
								font-size: 13px;
							}
						}

					}
				}
			}

			.total {
				height: 200rpx;
				margin-top: 16rpx;
				padding: 20rpx 30rpx;
				background-color: $my-bg-color;

				.total-l {
					height: 52rpx;
					display: flex;
					align-items: center;

					.l-p {
						margin: auto;
						margin-right: 0;
						color: $my-text-color-red;
					}
				}

				.time {
					width: 100%;
					text-align: right;
					color: $my-text-color-grey;
				}
			}
		}
	}

  .exp-list {
    margin: 20rpx;
    border-radius: 10rpx;
    background-color: #fff;
    padding: 20rpx;

    .title-list {
      font-weight: bold;
      // padding: 20rpx;
      padding-bottom: 10rpx;
      color: #000;
      font-size: 15px;

      //&::after {
      //  margin-left: 4rpx;
      //  content: '*';
      //  color: $base-color;
      //  font-size: 14px;
      //}
    }

    .content {
      margin-top: 20rpx;
      background: #f9f9f9;
      min-height: 140rpx;
      height: 140rpx;
      width: 100%;
      // margin: 20rpx;
      max-height: 200rpx;
      border-radius: 10rpx;
      padding: 20rpx;
      color: #303133;
      font-size: 14px;
      // border: 1px solid #d9d9d9;
    }

    .ph {
      font-size: 13px;
      color: #999;
    }
  }
  .showHide{
    display: flex;
    background-color: $my-bg-color;
    justify-content: center;
    .radio{
		padding: 4rpx 6rpx;
		font-size: 22rpx;
      border-radius: 5px ;
      border: 1px solid #b2b2b2;
    }

  }

  .line-list {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    // height: 60rpx;
    //border-bottom: 1px solid $my-border-color-grey;
    //padding: 0 0rpx;
    color: $my-text-color-grey;
    background-color: $my-bg-color;

    &.remark {
      word-break: break-all;
      // height: auto;
      padding: 30rpx;
      display: flex;

      .left {
        display: flex;
        align-items: center;
        // width: 16%;
        // width: 66px;
      }

      .right {
        flex: 1;
      }
    }

    &>.detail {
      color: $my-text-color-active;
    }

    .status {
      //margin: auto;
      //margin-right: 0;
      color: $my-bg-color-red;
    }

    .link {
      margin: auto;
      //margin-right: 0;
      color: $font-color-spec;
    }
  }

  .list-flex{
    display: flex;
  }
  .action-sections {
    /* #ifdef H5 */
    /*margin-bottom: 100upx;*/
    /* #endif */
    // position: fixed;
	margin-left: 20rpx;
    margin-right: 20upx;
    margin-bottom: 10upx;
    float: right;
    z-index: 95;
    display: flex;
    align-items: center;
	justify-content: flex-end;
    width: 100%;
    // height: 100upx;
    padding: 0 20upx;
    background: rgba(255, 255, 255, 0.1);
	background-color: #FFFFFF;
    // box-shadow: 0 0 20upx 0 rgba(0, 0, 0, .5);
    border-radius: 16upx;
    .action-btns {
      width: fit-content;
      min-width: 150upx;
      height: 60upx;
      display: inline-table;
      margin: 0;
      margin-top: 20upx;
      margin-bottom: 20upx;
      margin-left: 20upx;
      padding: 0 15upx;
      text-align: center;
      line-height: 60upx;
      font-size: $font-sm + 2upx;
      color: $font-color-dark;
      background: #fff;
      border-radius: 100px;
	  border: 0.5px solid #C0C4CC;

      &:after {
        border-radius: 100px;
      }

	  &.recom {
	  	background: #FFFFFF;
	  	color: $base-color;
	  	border: 0.5px solid $base-color;
	  }
    }
  }

  .uni-tip {
    overflow: hidden;
    .popup-content {
      .order-info {
        color: #303133;
        margin-bottom: 16rpx;
      }

      .cancel-reason {
        height: 140rpx;
        min-height: 140rpx;
        width: 100%;
        max-height: 200rpx;
        padding: 16rpx;
        color: #303133;
        font-size: 14px;
        border: 1px solid #d9d9d9;
      }
      .ph{
        font-size: 14px;
        color: #666;
      }
    }

    .uni-tip-group-button {
      border-top: none;

      .uni-tip-button {
        border-top: 1px solid #e2e2e2;

        &.confirm {
          border-top: 1rpx solid $base-color;
          border-bottom: 1rpx solid $base-color;
          color: #fff;
          background-color: $base-color;
        }
      }
    }
  }
</style>
